<template>
	<view class="page_1" v-if="order">
		<!-- 顶部状态 -->
		<view class="top_box" v-if="order.order_type!==2&&order.delivery_method !== 2">
			<view class="bj"><text>{{ order.status | statusFilter }}</text></view>
			<view class="describe" v-if="order.status == 1">正在加速打包中</view>
		</view>
		<!-- 收货地址 -->
		<view class="address_box" v-if="order.delivery_method==1&&order.order_type!==2">
			<image class="address_bj" src="../../static/tit.png"></image>
			<image src="../../static/address.png"></image>
			<view class="text">
				<view class="user_info">
					<view class="namebox">{{ order.shouhuoren }}</view>
					<view>{{ order.mobile }}</view>
				</view>
				<view class="address">
					{{ order.street }}
				</view>
			</view>
		</view>

		<!-- 自提门店信息 -->
		<view class="store_box" v-if="order.delivery_method == 2&&order.order_type!==2">
			<view class="top">
				<image src="../../static/address.png"></image>
				<view class="text">
					{{order.merch_address}}
				</view>
			</view>
			<view class="line" v-if="order.status==2&&order.delivery_method == 2"></view>
			<view class="time_btn"  v-if="order.status==2&&order.delivery_method == 2">
				<view class="tiem">营业时间：10:00-20:30</view>
				<view class="btn" v-if="order.pick_code" @click="showEwm">出示核销码</view>
			</view>
		</view>
		<view class="goods_status" style="margin-top: 0rpx;" v-if="order.order_type==2&&order.delivery_method == 1">
			<view class="info"  style="margin-top: 0rpx;">
				<image :src="order.merch_picarr"></image>
				<view class="title">
					<view class="title_item">
						<view class="title_left">店铺名称：{{order.merch_name}}</view>
						<!-- v-if="order.order_type==1" -->
						<!-- <view class="title_right" >
							<text>￥{{ ite.goods_price }}</text>
							<text>X{{ ite.goods_num }}</text>
						</view> -->
						<!-- <view class="title_right" v-else>
							<text>{{ ite.goods_price }}积分</text>
							<text>X{{ ite.goods_num }}</text>
						</view> -->
					</view>
					<!-- <view class="small_title">{{ ite.spec_name }}</view> -->
				</view>
			</view>
			<!-- <view class="time_btn" >
				<view class="tiem">店铺名称：{{order.merch_name}}</view>
			</view> -->
		</view>

		<!-- 商品信息 -->
		<view class="goods_status" @click="navOrderDatails()">
			<view class="number">
				<view class="left"><text>订单编号：</text><text>{{ order.order_sn }}</text></view>
				<view class="right"></view>
			</view>
			<view class="info" v-for="(ite, inde) in order.goods" :key="`goods-${inde}`">
				<image :src="ite.url"></image>
				<view class="title">
					<view class="title_item">
						<view class="title_left">{{ ite.goods_title }}</view>
						<!-- v-if="order.order_type==1" -->
						<view class="title_right" >
							<text>￥{{ ite.goods_price }}</text>
							<text>X{{ ite.goods_num }}</text>
						</view>
						<!-- <view class="title_right" v-else>
							<text>{{ ite.goods_price }}积分</text>
							<text>X{{ ite.goods_num }}</text>
						</view> -->
					</view>
					<view class="small_title">{{ ite.spec_name }}</view>
				</view>
			</view>
			<!--  v-if="order.order_type==1" -->
			<!-- <view class="price" >
				<view>商品总价</view>
				<view>￥{{ order.total_money }}</view>
			</view> -->
		<!-- 	<view class="price"  v-else>
				<view>商品所需兑换积分</view>
				<view>{{ order.total_money }}积分</view>
			</view> -->
			<view class="price">
				<view>运费</view>
				<view>￥{{ order.freight_money }}</view>
			</view>
			<view class="price" >
				<view>支付金额</view>
				<view style="color: #F94D29;">￥{{ order.pay_money }}</view>
			</view>
			<view class="price" >
				<view>优惠金额</view>
				<view style="color: #F94D29;">￥{{ order.coupon_money ||0}}</view>
			</view>
			<!-- <view class="price" v-else>
				<view>支付积分</view>
				<view style="color: #F94D29;">{{ order.pay_money }}积分</view>
			</view> -->
			<view class="price">
				<view>支付方式</view>
				<view>{{ order.pay_type==1?'积分支付':order.pay_type==2?'微信支付':order.pay_type==3?'优生活余额支付':'账户余额支付'}}</view>
			</view>
			<!-- //1积分支付 2微信支付  3POS余额支付 4账户余额支付 -->
			
		</view>

		<!-- 订单信息 -->
		<view class="order_info">
			<view class="title_box">
				<view class="shu"></view>
				<view class="title">订单信息</view>
			</view>
			<view class="flex">
				<view class="left">订单号</view>
				<view class="right"><text>{{ order.order_sn }}</text><text style="color:#CB9852" @click="copy">复制</text>
				</view>
			</view>
			<!-- <view class="flex">
				<view class="left">支付方式</view>
				<view class="right" v-if="order.order_type==1">在线支付</view>
				<view class="right" v-else>积分兑换</view>
			</view> -->
			<view class="flex">
				<view class="left">下单时间</view>
				<view class="right">{{ order.addtime }}</view>
			</view>
			<view class="flex" v-if="delivery_method!==1">
				<view class="left">核销时间</view>
				<view class="right" v-if="order.scan_time>0">{{ dateFormat(order.scan_time)||'' }}</view>
			</view>
			<view class="flex">
				<view class="left">备注</view>
				<view class="right" style="color:#666666">{{ order.remark ? order.remark : '无' }}</view>
			</view>
		</view>
		<view  style="height: 124rpx;"></view>
		<!-- 底部按钮 -->
		<view class="down_box" v-if="order.status!==5">
			<!-- 0待付款 1待发货 2待收货 3待评价 4已取消 5售后退款中 6已完成 7售后完成 为空默认全部 -->
			<!-- <view class="btn" @click="torefund()" 
			v-if="(order.status == 1 ||order.status == 2 || order.status == 3 || order.status == 6)&&order.order_type==1">退款/退货</view> -->
			<!-- <view class="btn" v-if="order.status ==6">再次购买</view> -->
			<!-- <view class="btnb" v-if="order.status == 2">
				确定收货
			</view> -->
			<!-- settle_status==0&&item.goods[0].goods_name&&list[index].delivery_method==1&&item.status!==0&&item.status<3&&item.order_type!==2 -->
			 <view class="btn" v-if="order.settle_status==0&&order.delivery_method==1&&order.status!==0&&order.status<3&&order.goods[0].goods_title&&item.order_type!==2" @click="torefund()">退款/退货</view> 
			<view class="btn" @click="cancelOrder" v-if="order.status == 0">取消订单</view>
			<view class="btn" v-if="order.status == 2&&order.goods[0].goods_title&&order.delivery_method==1" @click.stop="logistics()">查看物流</view>
			<!-- <view class="btn" @click="pay" v-if="order.status == 0">确认支付</view> -->
		</view>

		<!-- 遮罩层 -->
		<view class="zzc" v-if="isShowEwm" @click="isShowEwm = false"></view>
		<!-- 隐藏的二维码 -->
		<view class="hide_ewm" v-if="isShowEwm">
			<image class="shut" src="@/static/image/shut.png" @click="isShowEwm = false"></image>
			<view class="title_box">请营业时间内到店核销</view>
			<view class="line"></view>
			<image :src="'https://shex.app65.cn/'+order.pick_code" class="ewm"></image>
			<view class="number">
				<text>订单号</text>
				<text>{{order.order_sn}}</text>
			</view>
		</view>
		<CancelOrder ref="cancel" @cancel="cancelDone" @newlist="getOrderInfo"></CancelOrder>
	</view>
</template>

<script>
import CancelOrder from '../../components/cancelOrder.vue';
export default {
	components: { CancelOrder },
	data() {
		return {
			// 二维码是否显示
			isShowEwm: false,
			id: null,
			order: null,
			seftpick:"",
		};
	},
	onLoad({ id }) {
		this.id = id
		this.getOrderInfo()
		// this.getseltpickup()
	},
	filters: {
		statusFilter(val) {
			let arr = ['待付款', '待发货', '待收货', '待评价', '已取消', '售后退款中', '已完成', '售后完成']
			return arr[val]
		}
	},
	methods: {
		 dateFormat: function(value) {           
		                var date = new Date(value*1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
		                var year = date.getFullYear();
		                var month = ("0" + (date.getMonth() + 1)).slice(-2);
		                var sdate = ("0" + date.getDate()).slice(-2);
		                var hour = ("0" + date.getHours()).slice(-2);
		                var minute = ("0" + date.getMinutes()).slice(-2);
		                var second = ("0" + date.getSeconds()).slice(-2);
		                // 拼接
		                var result = year + "年" + month + "月" + sdate + "日 " + hour + ":" + minute + ":" + second;
		                // 返回
		                return result;
		            },
		getseltpickup(){
			this.$http({
				url:'api/wechat/pickSite'
			}).then(res=>{
				this.seftpick = res.data
			})
		},
		cancelDone() {
			uni.showToast({
				title: '取消成功',
				icon: 'success',
				mask: true
			})
			this.getOrderInfo()
		},
		copy() {
			uni.setClipboardData({
				data: this.order.order_sn,
				success: (result) => {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					})
				},
				fail: (error) => { }
			})
		},
		async getOrderInfo() {
			try {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let { data } = await this.$http({
					url: 'api/Wechat/orderDetail',
					data: {
						orderid: this.id
					}
				})
				this.order = data
			} finally {
				uni.hideLoading()
			}
		},
		cancelOrder() {
			this.$refs.cancel.open(this.order.id)
		},
		pay(){//this.order.pay_type,//1积分支付 2微信支付  3POS余额支付 4账户余额支付
			if(this.order.pay_type==2){
				this.wechatPay()
			}
			if(this.order.pay_type==3||this.order.pay_type==4){
				this.balancepay()
			}
		},
		// 获取微信支付参数
		async wechatPay() {
			const {data} = await this.$http({
				url: 'api/lklpay/orderPay',
				data: {
					orderid:this.id
				},
			})
			let that = this
			console.log(data,'data')
			uni.requestPayment({
				timeStamp: data.rows.timestamp,
				nonceStr: data.rows.nonce_str,
				package: data.rows.package,
				signType: "RSA",
				paySign: data.rows.pay_sign,
				success: function(res) {
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					})
					setTimeout(()=>{
						uni.redirectTo({
							url:'/pages/orderGoods/orderGoods?type='+1
						})
					},1000)
				},
				fail: function(res) {
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					})
				},
			})
			
		},
		
		//余额支付接口
		balancepay(){
			this.$http({
				url:'api/wechat/balancePay',
				data:{
					orderid:this.id,//
					pay_type:this.order.pay_type,//1积分支付 2微信支付  3POS余额支付 4账户余额支付
				}
			}).then(res=>{
				uni.showToast({
					title: '支付成功',
					icon: 'none'
				})
				setTimeout(()=>{
					console.log(this.delivery_method,'this.delivery_method')
					uni.reLaunch({
						// url:'/pages/orderGoods/orderGoods?type='+(5)+'&currindex=' + this.delivery_method
						url:'/pageshop/goodsorder/goodsorder?type='+(1)+'&order_type='+(1)+'&delivery_method='+((this.delivery_method)+1)///0==物流订单，1==自提订单
					})
				},1000)
			})
		},
		// 自提二维码按钮
		showEwm() {
			if(!this.order.pick_code){
				return
			}
			this.isShowEwm = true
		},
		//退款退货
		torefund(){
			uni.navigateTo({
				url:'/personalData/aftersale/aftersale?id='+this.order.id
			})
		},
		// 查看物流按钮
		logistics() {
			uni.navigateTo({
				url: "/pageshop/logistics/logistics?info="+encodeURIComponent(JSON.stringify(this.order))
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.page_1 {
	padding-bottom: 132rpx;
}

// 顶部状态
.top_box {
	width: 690rpx;
	height: 107rpx;
	background: #FFFFFF;
	border-radius: 0rpx 0rpx 10rpx 10rpx;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	gap: 0 26rpx;

	.bj {
		width: fit-content;
		padding: 0 40rpx 0 20rpx;
		height: 52rpx;
		background-image: url('https://shex.app65.cn/img/a2.png');
		background-size: 100%;
		font-size: 32rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 1em;
		display: flex;
		align-items: center;
		flex-shrink: 0;

		text {
			// margin-left: 20rpx;
		}
	}

	.describe {
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #CB9852;
	}
}

// 收货地址
.address_box {
	width: 750rpx;
	height: 149rpx;
	background: #FFFFFF;
	border-radius: 0rpx 0rpx 10rpx 10rpx;
	padding: 34rpx 30rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	gap: 0 20rpx;
	margin-top: 16rpx;
	position: relative;

	.address_bj {
		position: absolute;
		width: 100%;
		height: 14rpx;
		bottom: 0;
		left: 0;
	}

	image {
		width: 60rpx;
		height: 60rpx;
		flex-shrink: 0;
	}

	.text {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.user_info {
			display: flex;
			align-items: center;
			gap: 0 20rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #222222;
			line-height: 1em;
			.namebox {
				max-width: 300rpx;
				-webkit-line-clamp: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			
		}

		.address {
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #555555;
			line-height: 1em;
			-webkit-line-clamp: 1;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}

// 门店自提信息
.store_box {
	margin-top: 16rpx;
	width: 750rpx;
	// height: 244rpx;
	background: #FFFFFF;
	border-radius: 0rpx 0rpx 10rpx 10rpx;
	padding: 30rpx 30rpx 0 30rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	.top {
		height: 100%;
		display: flex;
		// justify-content: space-between;
		align-items: center;
		padding-bottom: 30rpx;
		box-sizing: border-box;
		gap: 0 24rpx;

		image {
			width: 28rpx;
			height: 28rpx;
			flex-shrink: 0;
		}

		.text {
			// height: 100%;
			// width: 100%;
			// display: flex;
			// flex-direction: column;
			// justify-content: space-between;
			align-items: center;


			.store_info {
				font-size: 32rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #222222;
				line-height: 1em;
				display: flex;
				gap: 0 20rpx;
			}

			.address {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #555555;
				line-height: 1em;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}

	.line {
		flex-shrink: 0;
		width: 100%;
		background: #FFFFFF;
		border: 2rpx solid #ECECEC;
	}

	.time_btn {
		flex-shrink: 0;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.tiem {
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #555555;
		}

		.btn {
			width: 184rpx;
			height: 64rpx;
			border-radius: 31rpx 31rpx 31rpx 31rpx;
			border: 2rpx solid #888888;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #222222;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

}

// 	商品信息
.goods_status {
	width: 750rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	margin-top: 20rpx;
	padding: 38rpx 32rpx 24rpx 28rpx;
	box-sizing: border-box;


	.number {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #222222;

			:first-child {
				color: #555555;
			}
		}

		.right {
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #CB9852;
		}
	}

	.info {
		height: 160rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 36rpx;
		gap: 0 28rpx;

		image {
			width: 160rpx;
			height: 160rpx;
			min-width: 160rpx;
			background: #FFFFFF;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			flex-shrink: 0;
		}

		.title {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			flex: 1;

			.title_item {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				gap: 0 58rpx;

				.title_left {
					font-size: 30rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					line-height: 1em;
				}

				.title_right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-end;

					:first-child {
						font-size: 28rpx;
						font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
						font-weight: normal;
						color: #222222;
						line-height: 1em;
					}

					:last-child {
						font-size: 24rpx;
						font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
						font-weight: normal;
						color: #555555;
						line-height: 1em;
						margin-top: 20rpx;
					}
				}
			}

			.small_title {
				font-size: 26rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #555555;
				line-height: 1em;
			}
		}
	}

	.price {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 48rpx;

		:first-child {
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #555555;
		}

		:last-child {
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #222222;
		}
	}
}

// 订单信息
.order_info {
	width: 750rpx;
	background: #FFFFFF;
	border-radius: 14rpx;
	padding: 34rpx 28rpx;
	margin-top: 24rpx;
	box-sizing: border-box;

	.title_box {
		display: flex;
		align-items: center;
		gap: 0 20rpx;

		.shu {
			width: 7rpx;
			height: 32rpx;
			background: linear-gradient(360deg, #CB9852 0%, #F8DEB7 100%);
			border-radius: 4rpx 0rpx 4rpx 0rpx;
		}

		.title {
			font-size: 32rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 48rpx;

		.left {
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #666666;
			line-height: 1em;
		}

		.right {
			display: flex;
			align-items: center;
			gap: 0 16rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #222222;
			line-height: 1em;
		}
	}
}

.down_box-placeholder {
	// padding-bottom: env(safe-area-inset-bottom);
}

// 底部按钮
.down_box {
	width: 100%;
	height: 112rpx;
	// padding: 20rpx 30rpx;
	box-sizing: border-box;
	background: #FFFFFF;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	position: fixed;
	bottom: 0;
	font-size: 28rpx;
	font-family: Source Han Sans CN-Regular, Source Han Sans CN;
	font-weight: 400;
	// gap: 0 20rpx;
	// padding-bottom: env(safe-area-inset-bottom);

	.btn {
		width: fit-content;
		height: 64rpx;
		padding: 0 20rpx;
		border-radius: 31rpx;
		border: 2rpx solid #999999;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #222222;
		line-height: 64rpx;
		margin: 10rpx 20rpx 0 0 ;
	}

	.btnb {
		width: fit-content;
		padding: 0 20rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: rgba(0, 0, 0, 0);
		border-radius: 31rpx 31rpx 31rpx 31rpx;
		opacity: 1;
		border: 2rpx solid #CB9852;
		color: #CB9852;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10rpx 20rpx 0 0 ;
	}
}

// 遮罩层
.zzc {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	background-color: #000;
	opacity: .6;
}

// 隐藏的二维码
.hide_ewm {
	width: 607rpx;
	height: 727rpx;
	background: #FFFFFF;
	border-radius: 14rpx;
	padding: 0 70rpx 38rpx 70rpx;
	box-sizing: border-box;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;

	.shut {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		top: 46rpx;
		right: 32rpx;
	}

	.title_box {
		height: 128rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 33rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #222222;
	}

	.line {
		width: 100%;
		height: 2rpx;
		background: #EEEEEE;
	}

	.ewm {
		width: 426rpx;
		height: 426rpx;
	}

	.number {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0 24rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;

		:first-child {
			color: #666666;
		}

		:last-child {
			color: #333333;
		}
	}
}
</style>
